<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8待做清单</title>
    <script src="vue3.js"></script>
    <style>
        .done{
            text-decoration: line-through;
        }
        .one{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <input v-model="newToDo"/>
            <button @click="handleAdd">Add todo</button>
        </div>
        <ul>
            <li v-for="(item,index) in filteredTodos" :key="item.id">
                <input type="checkbox" name="abc" v-model="item.done"/>
                <span :class="{done:item.done,one:item.done}">{{index}} : {{item.id}} -- {{item.text}} </span>
                <button @click="handleDelete(item.id)">x</button>
            </li>
        </ul>
        <button v-if="showall" @click="handleShowChange">展示全部</button>
        <button v-else @click="handleShowChange">隐藏完成</button>
    </div>
    <script>
        let {createApp} = Vue

        let index = 1000;
        createApp({
            data(){
                return {
                    newToDo:'',
                    showall:true,
                    todos: [
                        {id: ++index, text: '学习 html',done:false},
                        {id: ++index, text: '学习 javascript',done:true},
                        {id: ++index, text: '学习 css',done:false},
                    ]
                }
            },
            methods:{
                handleAdd(){
                    this.todos.push({id: ++index, text: this.newToDo,done:false})
                    this.newToDo = ''
                },
                handleDelete(id){
                    //方式4
                    this.todos = this.todos.filter(item => item.id !== id)
                },
                handleShowChange(){
                    this.showall = !this.showall
                },
            },
            computed:{
                filteredTodos() {
                    if(this.showall){
                        return this.todos
                    }else{
                        // let arr = []
                        // //筛选数据，放入新的数组
                        // for(let item of this.todos) {
                        //     if(item.done == false){
                        //         arr.push(item)
                        //     }
                        // }
                        // return arr

                        //第一步
                        // let arr = this.todos.filter(function (item){
                        //     if(item.done == false){
                        //         return true
                        //     }else{
                        //         return false
                        //     }
                        // })
                        // return arr

                        //第二步
                        // let arr = this.todos.filter(function (item){
                        //     return item.done == false
                        // })
                        // return arr

                        //第三步
                        // let arr = this.todos.filter(function (item){
                        //     return !item.done
                        // })
                        // return arr

                        //第四步 箭头函数
                        // let arr = this.todos.filter(item => {
                        //     return !item.done
                        // })
                        // return arr

                        //第五步 箭头函数 没有括号
                        let arr = this.todos.filter(item => !item.done)
                        return arr

                        //第六步
                        return this.todos.filter(item => !item.done)
                    }
                }
            }
        }).mount('#app')
    </script>
</body>
</html>